<template>
	<div class="home">
		<div id="content" style="height: 820px;">
			
			<div class="">
				<div class="clear" style="height:460px;">
					<div class="bgff fl position-re" style="width:300px;">
						<!-- <router-link to="oemIndex"> -->
							<a class=" oembtn" :class="val=='advert'?'':'c-blu b-blu'" href="javascript:;" @click="oemIndex">开通OEM</a>
						<!-- </router-link> -->
						<div class="user-logo">
							<img src="g-oidb_hxPIy1F7u2sib6uAaYIPtZw_1.jpg" alt="">
						</div>
						<p class="user-name">{{userInfo.userName}}</p>
						<div>
							<p class="tx-c fz18 mt10 c-f2752e" :class="val=='advert'?'':'c-blu'">我是{{val=='medium'?'媒介主':'广告主'}}</p>
							<a class="index-ade-change" href="javascript:;" id="cut-auth" @click="switchIdent">身份</a>
						</div>
						<ul class="index-user-bind">
							<li class="mb25 clear">
								<div class="fl index-pic user-detail-img user-detail-img-account"></div>
								<span class="fl user-detail-title">会员级别</span>
								<span class="user-vip-level fr">
									<!-- <img src="/images/vip/v0.png" alt=""> -->
									<i class="layui-icon c-f2752e">&#xe67a;</i>
								</span>
							</li>
							<li class="mb25 clear">
								<div class="fl index-pic user-detail-img user-detail-img-phone"></div>
								<span class="fl user-detail-title">手机</span>
								<span class="fr user-detail-data user-detail-phone">{{userInfo.userPhone}}</span>
							</li>
							<li class="mb25 clear">
								<div class="fl index-pic user-detail-img user-detail-img-wx"></div>
								<span class="fl user-detail-title">微信</span>
								<a class="fr user-detail-data">{{userInfo.userWechat}}</a>
							</li>
							<li class="mb25 clear">
								<div class="fl index-pic-web user-detail-img"></div>
								<span class="fl user-detail-title">微博</span>
								<a class="fr user-detail-data">{{userInfo.userMicroblog}}</a>
							</li>
							<li class="mb25 clear">
								<div class="fl index-pic-qq user-detail-img"></div>
								<span class="fl user-detail-title">QQ</span>
								<span class="fr user-detail-data">{{userInfo.userQQ}}</span>
							</li>
						</ul>
					</div>
					<div class="fr ml20" style="width:calc(100% - 320px)">
						<div style="height:280px;">
							<!-- medium -->
							<img v-if="val=='advert'" style="height:100%;width:100%;" src="../static/images/member_banner.png" alt="">
							<img v-else style="height:100%;width:100%;" src="../static/images/media_banner.png" alt="">
						</div>
						
						<div class="clear mt20">
							
							<!-- 财务模块 -->
							<div v-if="val=='advert'" class="fl bgff pb20" style="width:50%">
								<p class="fz18 ptb10 plr20 clear">
									<span class="fl lh1">财务</span>
									<a class="ml20 fz16 fr border-btn" href="javascript:;">充值</a>
								</p>
								<div class="clear fz14 plr20">
									<div class="fl plr20 ptb20 b-e0e0e0" style="width:calc(50% - 10px)">
										<p>可用余额</p>
										<p class="mt20 tx-r">
											<span class="c-f2752e">{{userInfo.userBalance}}</span> 元
										</p>
									</div>
									<div class="fr plr20 ptb20 b-e0e0e0" style="width:calc(50% - 10px)">
										<p>冻结余额</p>
										<p class="mt20 tx-r">
											<span class="c-f2752e">{{userInfo.userBlockedBalance}}</span> 元
										</p>
									</div>
								</div>
							</div>
							
							<div v-else class="fl bgff mr20 pb20" style="width:50%">
								<p class="fz18 ptb10 plr20 clear ">
									<span class="fl lh1">财务</span>
									<a class="ml20 fr border-btn" href="media/recharge">提现</a>
								</p>
								<div class="clear fz14 plr20">
									<div class="fl ptb20 b-e0e0e0 mr20" style="width:calc(50% - 10px)">
										<div style="text-indent:1em;position:relative;">账户余额
											<i class="layui-icon layui-icon-help c-999 pointer"></i>
											<div class="p10 infobox hide" style="left:85px;top:-80px;border-radius:2px;background: rgba(0,0,0,.8); color: #fff;position:absolute;z-index:2000;width:321px;">
											发稿完成之日起，7天后资金到账，可以申请提现，如无数据异常，将于3个工作日之内到账。提现无手续费。
											</div>
										</div>
										<p class="mt20 tx-r pr20">
											<span class="c-f2752e"> {{userInfo.userBalance}}</span> 元
										</p>
									</div>
									<div class="fr pb20 b-e0e0e0 tx-c" style="width:calc(50% - 10px);height:100px;padding-top: 34px;">
										<a href="/media/personal">
											<img width="80%" src="../static/images/fabuziyuan.png" alt="">
										</a>
									</div>
								</div>
							</div>
							
							
							<div class="fr bgff" style="width:calc(50% - 20px)">
								<div class="bgff mr20 pb20">
									<p class="fz18 ptb10 plr20 lh1">消息</p>
									<ul class="fz14 plr20" style="min-height: 100px;">

									</ul>
								</div>
							</div>
						</div>
						
						
						
						
						
					</div>
				</div>
				
				
				<div class="mt20 clear" style="height:320px;">
					
					<!-- 订单模块 -->
					<div v-if="val=='advert'" class="bgff fl mr20" style="width:calc(33% - 13px);height:100%;">
						<p class="fz16 ptb10 plr20">订单</p>
						<div class="clear fz14 plr20 tx-c lh1" style="height:40%;">
							<div class="fl b-e0e0e0 mr10 ptb10" style="width:calc(33% - 7px);">
								<router-link to="order/article">
								<div>
									<p><a href="javascript:;"><img style="width:40px;" src="../static/images/order2.png" alt=""></a></p>
									<p class="mtb10">执行中订单</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
								</router-link>
							</div>
							<div class="fl b-e0e0e0 mr10 ptb10" style="width:calc(33% - 7px);">
							<router-link to="order/article">
								<div>
									<p><a href="javascript:;"><img style="width:40px;" src="../static/images/order1.png" alt=""></a></p>
									<p class="mtb10">已完成订单</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
								</router-link>
							</div>
							<div class="fr b-e0e0e0 ptb10" style="width:calc(34% - 6px);">
								<router-link to="order/article">
								<div>
									<p><a href="javascript:;"><img style="width:40px;" src="../static/images/order3.png" alt=""></a></p>
									<p class="mtb10">已取消订单</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
								</router-link>
							</div>
						</div>
						<div class="mt20" style="height: 48%;">
							<div class="popularize-step-des">
								<p class="fz16">投放步骤</p>
								<div class="popularize-step-detail">
									<div class="nr-steps">
										<div class="nr-steps-item">
											<div class="nr-steps-title">选择投放资源</div>
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">1</div>
											</div>
											<div class="nr-steps-tail">
												<div class="pr"><i></i>
													<div class="nr-steps-des">
														<div class="linear" style="height: 36px; left: 16px; top: 25px;"></div>
														<div class="item"><i></i>口号帮提供多种形态的媒体广告资源</div>
														<div class="item"><i></i>选择需要的投放媒体资源进行投放</div>
													</div>
												</div>
											</div>
										</div>
										<div class="nr-steps-item">
											<div class="nr-steps-tail">
												<div class="pr"><i></i>
													<div class="nr-steps-des">
														<div class="linear" style="height: 90px; left: 16px; top: 25px;"></div>
														<div class="item"><i></i>录入投放的相关信息：活动名称，执行时间等</div>
														<div class="item"><i></i>录入素材：选择链接，文档上传，在线编辑</div>
														<div class="item"><i></i>下单完成，等到接待。</div>
													</div>
												</div>
											</div>
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">2</div>
											</div>
											<div class="nr-steps-title">录入投放信息</div>
										</div>
										<div class="nr-steps-item">
											<div class="nr-steps-title">投放结果反馈</div>
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">3</div>
											</div>
											<div class="nr-steps-tail">
												<div class="pr"><i></i>
													<div class="nr-steps-des">
														<div class="linear" style="height: 36px; left: 16px; top: 25px;"></div>
														<div class="item"><i></i>异常订单，取消反馈相应资金</div>
														<div class="item"><i></i>完成订单，对交易订单进行评分</div>
													</div>
												</div>
											</div>
										</div>
										<div class="nr-steps-item">
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">4</div>
											</div>
											<div class="nr-steps-title" style="left: -1px;">投放结束</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					
					<div v-else class="bgff fl mr20" style="width:calc(33% - 13px);height:100%;">
						<p class="fz18 ptb10 plr20">订单</p>
						<div class="clear fz14 plr20 tx-c lh1" style="height:40%;">
							<div class="fl b-e0e0e0 ptb10 mr10" style="width:calc(25% - 7px);">
								<div>
									<p><a href="http://yun.kouhaobang.com/media/order/article"><img style="width:40px;" src="../static/images/order4.png" alt=""></a></p>
									<p class="mtb10">待接单</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
							</div>
							<div class="fl b-e0e0e0 ptb10 mr10" style="width:calc(25% - 7px);">
								<div>
									<p><a href="http://yun.kouhaobang.com/media/order/article"><img style="width:40px;" src="../static/images/order2_med.png" alt=""></a></p>
									<p class="mtb10">执行中</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
							</div>
							<div class="fl b-e0e0e0 ptb10 mr10" style="width:calc(25% - 8px);">
								<div>
									<p><a href="http://yun.kouhaobang.com/media/order/article"><img style="width:40px;" src="../static/images/order1_med.png" alt=""></a></p>
									<p class="mtb10">已完成</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
							</div>
							<div class="fl b-e0e0e0 ptb10" style="width:calc(25% - 8px);">
								<div>
									<p><a href="http://yun.kouhaobang.com/media/order/article"><img style="width:40px;" src="../static/images/order3_med.png" alt=""></a></p>
									<p class="mtb10">已取消</p>
									<p class="fz18 c-f2752e">0</p>
								</div>
							</div>
						</div>
						<div class="mt20" style="height: 46%;">
							<div class="popularize-step-des">
								<p class="fz16">投放步骤</p>
								<div class="popularize-step-detail">
									<div class="nr-steps">
										<div class="nr-steps-item">
											<div class="nr-steps-title">添加/审核资源</div>
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">1</div>
											</div>
											<div class="nr-steps-tail">
												<div class="pr"><i></i>
													<div class="nr-steps-des">
														<div class="linear" style="height: 36px; left: 16px; top: 25px;"></div>
														<div class="item"><i></i>选择自己的优势资源，进行添加审核</div>
														<div class="item"><i></i>口号帮会对优势资源进行更多的推荐</div>
													</div>
												</div>
											</div>
										</div>
										<div class="nr-steps-item">
											<div class="nr-steps-title">接收/处理订单</div>
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">2</div>
											</div>
											<div class="nr-steps-tail">
												<div class="pr"><i></i>
													<div class="nr-steps-des">
														<div class="linear" style="height: 76px; left: 16px; top: 25px;"></div>
														<div class="item"><i></i>建议及时对订单进行处理</div>
														<div class="item"><i></i>在订单处理时，对订单素材进行严格审核</div>
														<div class="item"><i></i>涉及到违规订单，口号帮会对媒体主进行问责</div>
													</div>
												</div>
											</div>
										</div>
										<div class="nr-steps-item">
											<div class="nr-steps-title">完成/反馈订单</div>
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">3</div>
											</div>
											<div class="nr-steps-tail">
												<div class="pr"><i></i>
													<div class="nr-steps-des">
														<div class="linear" style="height: 90px; left: 16px; top: 25px;"></div>
														<div class="item"><i></i>订单完成后，请添加完成链接和完成图片，防止造成纠纷</div>
														<div class="item"><i></i>收益到账，会在广告主确定完成订单后，解除冻结进行发放</div>
														<div class="item"><i></i>订单出现售后问题，口号帮会及时介入，维护双方利益</div>
													</div>
												</div>
											</div>
										</div>
										<div class="nr-steps-item">
											<div class="nr-steps-head">
												<div class="nr-steps-head-inner">4</div>
											</div>
											<div class="nr-steps-title" style="left: -30px;">提现实现收益</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					
					
					
					<!-- 消息 -->
					<div v-if="val=='advert'" class="bgff fl mr20  tx-c" style="width:calc(33% - 13px);height:100%;">
						<img height="100%" src="../static/images/20190628152445.png" alt="">
					</div>
					
					<div v-else class="bgff fl mr20 fz12 p20" style="width:calc(33% - 13px);height:100%;" id="liScrollBox">
						<div id="liScroll" style="overflow:hidden;height:100%;">
							<ul id="item">
								<div class="fz16" align="center" style="margin-top: 25%">
									<img style="width:200px;" src="/images/20190628161330.png" alt="">
								</div>
							</ul>
							<div id="item_cp"></div>
						</div>
					</div>
					
					
					<!-- 提示 -->
					<div v-if="val=='advert'" class="bgff fr clear" style="width:calc(34% - 14px);height:100%;">
						<div class="fl" style="margin-left: 5%;margin-top: 5%;width:40%;">
							<img width="110%" height="100%" src="../static/images/20190628154914.png" alt="">
						</div>
						<div class="fr" style="width:55%;margin-top: 5%;">
							<div style="float: left;margin-left: 10%">
								<p style="font-size: 14px;margin-bottom:40px;">客服QQ：
									<a style="color:#000;" href="javascript:;" target="_blank" rel="noopener noreferrer">
										<img style="width:18px;display: inline-block;vertical-align: top;" src="../static/images/qq1.png" alt="">2508490577
									</a>
								</p>
								<p style="font-size: 14px;margin-bottom:40px;">客服QQ：
									<a style="color:#000;" href="javascript:;" target="_blank" rel="noopener noreferrer">
										<img style="width:18px;display: inline-block;vertical-align: top;" src="../static/images/qq1.png" alt="">1946919250
									</a>
								</p>
							</div>

							<div style="float: left;margin-left: 10%">
								<p style="font-size: 14px;margin-bottom:40px;">资源QQ：
									<a style="color:#000;" href="javascript:;" target="_blank" rel="noopener noreferrer">
										<img style="width:18px;display: inline-block;vertical-align: top;" src="../static/images/qq1.png" alt="">2580655017
									</a>
								</p>
								<p style="font-size: 14px;margin-bottom:20px;">招商QQ：
									<a style="color:#000;" href="javascript:;" target="_blank" rel="noopener noreferrer">
										<img style="width:18px;display: inline-block;vertical-align: top;" src="../static/images/qq1.png" alt="">2144023981
									</a>
								</p>
							</div>
						</div>
					</div>
					
					<div v-else class="bgff fl position-re" style="width:calc(34% - 14px);height:100%;overflow: hidden;">
						<img style="width:80%;" class="position-middle-center" src="../static/images/20190627181608.png" alt="">
					</div>
					
					
					
				</div>
			</div>
			<!-- 请完善信息 -->
			<div class="mask-box addphone  hide " style="background: rgba(0, 0, 0, 0.2);">
				<div class="position-middle-center bgff content" style="width:360px;">
					<h2 class="ptb15 plr20 mb20 bb-e0e0e0 bold">请完善信息</h2>
					<div class="plr20 ">
						<div class="stp1">
							<div class="clear">
								<span class="fl" style="padding: 13px 0 13px;">手机号：</span>
								<div class="fl input-item mb20 phone fz14">
									<i class="khbicon khb-phone"></i>
									<input type="text" name="phone" value="" required="phone" lay-verify="phone" placeholder="请输入手机号" class="layui-input input inputfocus">
								</div>
							</div>
							<div class="mb20 submit tx-c">
								<button class="layui-btn layui-btn-sm layui-btn-normal khb-btn codebtn">下一步</button>
							</div>
						</div>
						<div class="stp2-f hide">
							<div class="clear">
								<span class="fl" style="padding: 13px 0 13px;">验证码：</span>
								<div class="fl input-item mb20">
									<i class="khbicon khb-code"></i>
									<input type="text" name="code-stp-btn-f" placeholder="请输入验证码" class="layui-input input inputfocus">
								</div>
							</div>
							<div class="clear">
								<span class="fl" style="padding: 13px 0 13px;"> &nbsp; 密&nbsp;码：</span>
								<div class="fl input-item mb20 password">
									<i class="khbicon khb-password"></i>
									<input type="password" name="password" placeholder="请设置密码(6-22位)" lay-verify="pass" class="layui-input input inputfocus">
								</div>
							</div>
							<div class="mb20 submit tx-c">
								<button class="layui-btn layui-btn-sm layui-btn-normal khb-btn stp-btn-f">下一步</button>
							</div>
						</div>
						<div class="stp2-t hide">
							<div class="clear">
								<span class="fl" style="padding: 13px 0 13px;">验证码：</span>
								<div class="fl input-item mb20">
									<i class="khbicon khb-code"></i>
									<input type="text" name="code-stp-btn-t" placeholder="请输入验证码" class="layui-input input inputfocus">
								</div>
							</div>
							<div class="mb20 submit tx-c">
								<button class="layui-btn layui-btn-sm layui-btn-normal khb-btn stp-btn-t">下一步</button>
							</div>
						</div>
						<div class="stp3 hide">
							<div class="tx-c mb20">
								<img style="width:80px;" src="../static/images/khb/chenggong.png" alt="">
							</div>
							<div class="mb20 submit tx-c">
								<button class="layui-btn layui-btn-sm layui-btn-normal khb-btn success-btn">完成</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mask-box hide" id="authbox">
				<div style="width:280px;height:150px;border-radius:2px;" class="position-middle-center bgff tx-c">
					<i style="position:absolute;right:8px;top:8px;cursor:pointer;" class="khbicon khb-close"></i>
					<div class="mt40 c-main">
						<p>切换到媒介主？</p>
					</div>
					<div class="mt40">
						<a href="javascript:;" style="border-radius:2px;padding:5px;" class="khb-btn">去媒介主</a>
					</div>
				</div>
			</div>
			<div class="mask-box hide close__" id="active-1">
				<div style="width:480px;border-radius:2px;" class="position-middle-center bgff tx-c">
					<i style="position:absolute;right:8px;top:8px;cursor:pointer;" class="close__ khbicon khb-close fz18"></i>
					<div style="padding:30px;">
						<div><img style="width:60px;" src="../static/images/khb/active.png" alt=""></div>
						<p class="fz20 bold mtb20">口号帮通知</p>
						<p class="fz16 tx-l mb20">亲爱的用户，您好</p>
						<p class="fz16 tx-l mb30" style="line-height:1.5;">电商6·18来袭，现口号帮特推出，充值返现活动，首充100元立即返还50余额。多冲多优惠!详询客服QQ：19461919250</p>
						<p class="fz16 tx-r">2019年5月28日</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'home',
		data() {
			return {
				token:this.$route.params.token,
				userInfo : {}
			}
		},
		methods: {
			oemIndex(){
				console.log("跳转")
				//this.$router.push('oemIndex');
				this.$router.push('/oem/index');
			},
			switchIdent(){
				// this.$router.push('/repay/repay');
				
				return;
				let idType = this.val;
				let str = idType=='medium'?'广告主':'媒介主';
				this.$confirm('切换到'+str, '提示', 
				{confirmButtonText: '确定',cancelButtonText: '取消'})
				.then(() => {
					idType = idType=='advert'?'medium':'advert';
					this.$store.commit('setIdentityType',idType);
					
				}).catch(() => {
				});
			},
			findJccmUserById(){
				//{access_token:this.token}
				this.$api.req.findJccmUserById()
				.then(res => {
					this.userInfo = res.data;
				})
				
			}
		},
		computed: {
			val() {
				console.log("identityType",this.$store.state.identityType)
				return this.$store.state.identityType;},
		},
		mounted() {
			// console.log(this.identityType)
			this.findJccmUserById();
			//console.log(this.token)
		},
		props: {
			msg: String,
			// identityType:String
		},
		components: {}
	}
</script>

<style scoped>
	@import url("../static/css/khbicon.css");
	@import url("../static/layui/css/layui.css");
	@import url("../static/css/reset.css");
	@import url("../static/css/home.css");
	@import url("../static/css/personal.css");
	@import url("../static/css/scrollbar.css");
	.khb-btn:hover {
		color:#fff;
	}
	.layui-icon.layui-icon-help:hover +.infobox{
		display:block;
	}
	.c-org{color: #f2752e;}
	.b-blu{border: 1px solid #4eb6ff;}
	.c-blu{color: #4eb6ff;}
</style>
